<template>
    <Modal :mask-closable="false" class="modal-content-layout" v-model="show" :title="`CapEx: [${info.projectId}] - [${info.projectName}]`"
           width="1200px">
        <div class="wrap">
            <Timeline>
                <TimelineItem v-for="(item,index) in list" :key="index" :color="item.statusColor">
                    <p class="dateWrap">{{ item.time }}</p>
                    <div class="content">
                        <div class="progressCode">{{ item.progressCode }}</div>
                        <div><span :style="{color: item.statusColor}" class="bold">{{ item.statusName }}</span>&nbsp;By&nbsp;<span
                            class="bold">{{ item.empNo }}</span>&nbsp;<span class="bold">{{ item.userName }}</span>&nbsp;(<span
                            class="bold">{{ item.role }}</span>)
                            <p v-if="item.approvalRemark"> Remarks: {{ item.approvalRemark }}</p>
                            <p v-if="index==list.length-1 && info.isEnd" class="bold" style="color: #19be6b">PROJECT
                                COMPLETED.</p>
                        </div>
                    </div>
                </TimelineItem>
            </Timeline>
        </div>
        <div slot="footer">
            <!--      <Button type="default" @click="show=false">{{ $t('common.Cancle') }}</Button>-->
            <Button type="primary" @click="show=false">{{ $t('maintenance.Confirmed') }}
            </Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: "projectRecordModal",
    data() {
        return {
            show: false,
            list: [],
            info: {}
        }
    },
    methods: {
        showModal(info) {
            this.list = []

            const {id, mainId,subProjectId} = this.$store.state.capexProcessSchedule;

            if (subProjectId){
                info.projectId = info.projectId + '-' + subProjectId
            }

            this.info = {...info}

            this.axios({
                method: 'get',
                url: '/dms/capex/findHistoryById',
                params: {
                    id: mainId,
                    subId: id
                }
            }).then(res => {
                if (res.code === 200) {
                    this.show = true
                    this.list = res.data.map(item => {
                        const {
                            approvalTime,
                            submitTime,
                            status,
                            progressCode,
                            approvalRemark,
                            approvalByStr,
                            submitByStr,
                            approvalRoleByStr,
                            submitRoleByStr,
                            empNo
                        } = item;

                        const time = approvalTime || submitTime;
                        const userName = approvalByStr || submitByStr
                        const role = approvalRoleByStr || submitRoleByStr
                        const statusName = submitTime ? 'Submitted' : status == 1 ? "APPROVED" : "REJECTED"
                        const statusColor = submitTime ? '#035beb' : status == 1 ? "#19be6b" : "#ed4014"
                        return {
                            time,
                            userName,
                            role,
                            statusName,
                            progressCode,
                            approvalRemark,
                            statusColor,
                            empNo
                        }
                    })
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        submit() {
            this.$emit('change', this.index)
        }
    }
}
</script>
<style lang="scss" scoped>
.dateWrap {
    display: inline-block;
    width: 250px;
    vertical-align: top;
}

.content {
    display: inline-block;
    width: calc(100% - 250px);
}

.progressCode {
    font-weight: bold;
    font-size: 16px;
}

.bold {
    font-weight: bold;
}

.wrap {
    height: 600px;
    overflow-y: auto;
}

/deep/ .ivu-timeline-item-head {
    border-width: 2px;
}
</style>
